<template>
	<view class="container">
		<view class="content">
			<view class="title" style="font-family: my-font;">分类</view>
			<uv-vtabs :chain="true" 
			:list="lists" height="1442rpx" 
				hdHeight="200rpx" @change="change">
<!-- 				<view class="more" @click="toMore">
					查看更多
					<image src="../../static/右箭头.png" style="width: 32rpx;height: 32rpx;"></image>
				</view> -->
				<template v-for="(item, index) in lists" :key="index">

					<uv-vtabs-item :index="index">

						<view class="book_container" v-for="(item2,index2) in item.resource" :key="index2" @click="toBookDetail(item2.resourceId)">
							<uv-image class="book_image" :customStyle="customStyle2" radius="0" :src="item2.cover" width="148rpx"
								height="208rpx"></uv-image>
							<view class="rit">
								<p class="book_name">{{item2.resourceName}}</p>
								<p class="rit_author">{{item2.author}}</p>
								<p class="rit_desc">{{item2.briefIntroduction}}</p>
								<!-- 								<uv-text class="rit_author" :lines="1" size="14" :text="item2.author"></uv-text>
								<uv-text class="rit_desc" :lines="1" color="#86909C" size="14"
									:text="item2.desc"></uv-text> -->
							</view>

						</view>
						<view class="gap" v-if="index < lists.length - 1">
							<uv-gap bg-color="#f1f1f1" height="4"></uv-gap>
						</view>
					</uv-vtabs-item>
				</template>
				<uv-gap bg-color="#fff" height="600"></uv-gap>
			</uv-vtabs>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import useGetGlobalProperties from '@/util/useGlobal.js'
	//let url = 'http://61.163.243.7:9999/digitallibrary/file/lengleng/wx/about.png'
	const toBookDetail = (e) => {
		uni.navigateTo({
			url: '/pages/index/bookDetail/bookDetail?id='+e
		})
	}
	const toMore = () => {
		uni.navigateTo({
			url: '/pages/category/categoryMore/categoryMore'
		})
	}
	const customStyle2 = ref({
		boxShadow: '2px 2px 5px rgba(0, 0, 0.2, 0.5)'
	});
	const data = reactive({
		list: [{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				name: '三国演义'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				name: '水浒传'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				name: '西游记'
			}
		],
		categoty: [
			'电子书',
			'有声图书',
			'报纸'
		]
	});
	const getList = [{
			name: '政治法律',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治法律思想史教程',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神读本',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '农业领导干部学法用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		},
		{
			name: '文学传纪',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治法律思想史教程',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神读本',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '农业领导干部学法用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		},
		{
			name: '自然科普',

			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治法律思想史教程',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神读本',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '农业领导干部学法用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		},
		{
			name: '农业科技',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治法律思想史教程',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神读本',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '农业领导干部学法用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		},
		{
			name: '国学传承',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治法律思想史教程',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神读本',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '农业领导干部学法用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		}, {
			name: '儿童阅读',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治法律思想史教程',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神读本',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '农业领导干部学法用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		}, {
			name: '文化教育',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治法律思想史教程',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神读本',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '农业领导干部学法用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		}, {
			name: '电脑网络',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治法律思想史教程',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神读本',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '农业领导干部学法用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		}, {
			name: '医疗保健',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治法律思想史教程',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神读本',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '农业领导干部学法用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		}, {
			name: '饮食习惯',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治法律思想史教程',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神读本',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '农业领导干部学法用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		}, {
			name: '历史军事',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治法律思想史教程',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神读本',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '农业领导干部学法用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		}, {
			name: '修身励志',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治法律思想史教程',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神读本',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '农业领导干部学法用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		}
	];
	const barStyle = ref({
		width:'220rpx',
		whiteSpace:'nowrap',
		overFlow:'hidden',
		textOverFlow: 'ellipsis'
	});

	const lists = ref([]);
	const chain = ref(true);

	const height = computed(() => {
		return uni.getSystemInfoSync().windowHeight - uni.upx2px(100);
	});

	const change = (index) => {
		console.log('选项改变：', index);
	};
	const httpurl = useGetGlobalProperties().$https;
	const book = useGetGlobalProperties().$book;
	
	const init = () => {
		uni.showLoading({
					title:'正在加载中'
				})
		uni.request({
			url: httpurl + '/wxApi/appInterface/getTypeResources/' + book,
			method: 'GET',
			success: (res) => {
				lists.value = res.data.data
				for(let i = 0;i<res.data.data.length;i++){
					if(res.data.data[i].name.length<5){
						continue;
					}
					res.data.data[i].name = res.data.data[i].name.substr(0,5)+'..';
				}
				console.log('list', lists.value)
				uni.hideLoading()
			}
		})
	}
	onMounted(() => {
		init();
	})

	lists.value = getList;
</script>
<style scoped lang="scss">
	.more {
		display: flex;
		align-items: center;
		margin-left: 350rpx;
		color: #86909C;
		font-family: my-font;
	}

	.book_name {
		display: inline-block;
		width: 150px;
		/* 设置显示的宽度 */
		overflow: hidden;
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		white-space: nowrap;
		/* 不换行 */
		position: absolute;
		top: 7%;

	}

	.rit_desc {
		display: inline-block;
		width: 150px;
		/* 设置显示的宽度 */
		overflow: hidden;
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		white-space: nowrap;
		/* 不换行 */
		font-family: Source Han Sans CN-Regular;
		position: absolute;
		bottom: 25%;
		color: #86909C;
		font-size: 24rpx;
	}

	.rit_author {
		display: inline-block;
		width: 150px;
		/* 设置显示的宽度 */
		overflow: hidden;
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		white-space: nowrap;
		/* 不换行 */
		font-family: Source Han Sans CN-Regular;
		font-size: 24rpx;
		position: absolute;
		top: 35%;
	}

	.book_image {
		margin-bottom: 60rpx;
		margin-left: 32rpx;
	}

	.rit {

		margin-bottom: 100rpx;
		margin-left: 20rpx;
		font-family: my-font;
		margin-top: 10%;
	}

	.book_container {
		display: flex;
		align-items: center;
		margin-top: 5%;
		margin-left: 5%;
		margin-bottom: 5%;
		position: relative;
	}

	.container {
		font-family: my-font;
	}

	.content {
		margin-top: 100rpx;
		font-family: Source Han Sans CN-Regular;
	}

	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}

	.title {
		font-family: my-font;
		margin-left: 20rpx;
		margin-bottom: 48rpx;
		font-size: 30rpx;
	}

	.item {
		padding: 10rpx 20rpx;

		&-title {
			.text {
				font-weight: 700;
				font-size: 32rpx;
				color: #111;
			}
		}

		&-content {
			padding: 20rpx 0;

			.text {
				line-height: 48rpx;
				font-size: 30rpx;
				color: #111;
				/* #ifndef APP-NVUE */
				word-break: break-all;
				/* #endif */
			}
		}
	}

	.gap {
		padding: 0 30rpx;
	}
</style>